Day 04 - CSS 選擇器（巢狀、選擇器優先權）

18th鐵人賽 day 04 css html 好耶

饅頭

團隊第二屆技術創作市集

2026-08-23 10:40:58

34 瀏覽

分享至

前幾天介紹了各式各樣的 CSS 選擇器，大家可能會發現當選擇器越寫越多時，常常會越串越長。這時候就可以利用「巢狀（Nesting）」的寫法，讓 CSS 結構更清晰、更好閱讀！不過，當選擇器變得複雜時，隨之而來的問題就是：樣式衝突時，到底以誰為準？ 今天就來為大家一一解答！( ´ ▽ ` )ﾉ

巢狀（CSS Nesting）

過去在撰寫 CSS 樣式時，如果要使用多層級的複雜選擇器，總是需要重複寫出完整的選擇器路徑，才能正確指定目標元素。尤其是在處理大量後代選擇器、偽元素時，這種寫法既冗長又難以管理和維護。

<nav class="navbar">
    <ul>
        <li><a href="#home">首頁</a></li>
        <li><a href="#about">關於我們</a></li>
        <li><a href="#services">服務項目</a></li>
        <li><a href="#portfolio">作品集</a></li>
        <li><a href="#contact">聯絡我們</a></li>
    </ul>
</nav>

.navbar { background: #333; }
.navbar ul { list-style: none; }
.navbar ul li { display: inline-block; }
.navbar ul li a { color: white; }
.navbar ul li a:hover { color: #ccc; }

以上範例是一個網頁的導航選單，如果要將每個選擇器路徑分開寫，父元素 .navbar 就會需要重複寫很多次，這不僅使程式碼冗長，還增加了維護難度。為了解決這種冗長重複的問題，CSS 引入了巢狀寫法。

簡化選擇器路徑

利用巢狀語法，可以直接在父元素選擇器內撰寫子元素樣式，避免重複書寫選擇器路徑。

將前述的導航選單範例，改寫為以下巢狀結構。

.navbar {
  background: #333;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: white;
        &:hover {
          color: #ccc;
        }
      }
    }
  }
}

引用父元素

使用「&」符號可以代表父元素自己。

當需要為相同的類別設定不同變化時，例如：.btn.btn-primary 可以將這些選擇器寫入 .btn 內部，並簡化成 &.btn-primary。

<button class="btn btn-primary">
  主要按鈕
</button>
<button class="btn btn-secondary">
  次要按鈕
</button>

.btn {
  padding: 12px 20px;
  background: #ccc;
  border: none;
  cursor: pointer;
  border-radius: 20px;

  /* 等同於 .btn.btn-primary */
  &.btn-primary {  
    background: #336be3;
    color: white;
  }

  /* 等同於 .btn.btn-secondary */
  &.btn-secondary {

    background: #42a649;
    color: white;
  }
}

當需要使用偽類選擇器或新增偽元素時，例如：:hover、::before，可以直接在父元素內，並寫成 &:hover、&::before 的形式。

.btn {
  /* 等同於 .btn:hover */
  &:hover {

    opacity: 0.8;
  }

  /* 等同於 .btn::before */
  &::before {

    content: "→ ";
    margin-right: 4px;
  }
}

選擇器優先權（Specificity）

CSS 的設計讓我們能輕鬆重複使用樣式，但若管理不當，這些樣式很容易相互衝突。所以當多個樣式規則套用到同一個元素時，瀏覽器會需要決定哪個規則會被採用，這就是 CSS 的優先權機制。主要的優先權，可以遵循以下核心原則：

後寫的規則優先：在相同的優先度情況下，後寫的樣式會覆蓋先寫的樣式。

.button { background: blue; }   /* 先寫 */
.button { background: red; }    /* 後寫，會覆蓋前面的，按鈕變紅色 */

選擇器精準度：選擇器指定範圍越大，優先度就較低。選擇器指定範圍越小、越精準，優先度就越高。
層級複雜度：同理於第二項，複雜多層級的選擇器，優先度會高於單一層級的選擇器。
```
.parent { color: red; }          /* 優先度較小 */
.parent .child { color: black; } /* 優先度較大 */
```

優先權順序（由低到高）

CSS 提供了精確的優先權計算機制，解決選擇器規則之間的優先順序問題，但如果您已熟悉前述核心原則，實際使用上，其實不必特別計算這些數值，但下面仍會按照優先權由低到高依序介紹。

繼承屬性
- 從父元素繼承的樣式，優先權為 0。
- 內部的子元素會自動繼承外部父元素的設定，利用這個特性可以設定特定區塊內所有元素的共同樣式，可以減少重複的樣式宣告（如字體、顏色等），讓程式碼更簡潔。
```
<div class="parent">
  <p class="child">文字</p>
</div>
```
```
/* 父元素 .parent 的設定，會繼承給內部子元素 .child */
.parent {
  color: red;  
}
```
通用選擇器
- 通用選擇器的優先權為 0，是所有選擇器中優先權最低的。
```
* {
  color: silver;
} 
```
標籤選擇器、偽元素
- 標籤選擇器的優先權為 1，常用於設定基本樣式，但容易被其他選擇器覆蓋。
```
div {
  color: black;
}
::before {
  color: gray;
}
```
類別、屬性、偽類選擇器
- 類別選擇器的優先權為 10，適合用於定義可重複使用的樣式組件。
```
.my-class {
  color: green;
}
[type="text"] {
  color: blue;
}
:hover {
  color: purple;
}
```
ID 選擇器
- ID 選擇器的優先權為 100，由於每個 ID 在頁面中只能使用一次，因此優先度會高於類別選擇器，使用時需特別留意。
```
#my-id {
  color: red;
}
```
內聯樣式
- 寫在 HTML 標籤的 style 屬性中的樣式優先度極高，優先權為 1000。
- 有時候 HTML 元素會被 JavaScript 強制加上內聯樣式，導致外部 CSS 檔案的樣式無法覆蓋，這種情況下，只有添加 !important 的 CSS 規則才能優先套用。
```
<div style="color: orange;"> 
```
!important
- 有最高優先度，可以覆蓋掉下面的規則。
- 不建議過度使用，因為這會破壞 CSS 原有的優先權機制，導致樣式表難以維護。
```
p { 
  /* !important 會覆蓋下面的規則 */
  color: blue !important; 
  color: red; 
}
```

使用建議

這幾天介紹了各種選擇器的使用方式，以下將整理一些開發原則，幫助你建立更易於維護的 CSS：

避免使用大範圍的選擇器來大量套用樣式，大範圍樣式容易與更精準的小範圍樣式產生衝突。 減少直接使用通用選擇器與元素選擇器，改用附帶類別的選擇器。
避免使用超過 3 層結構的選擇器，否則樣式會變得難以維護與使用。
使用語意化的類別名稱，命名時建議使用元素的功能命名，而非視覺外觀。 例如：.submit-button 優於 .blue-button。
多使用組合選擇器，可以減少重複的程式碼。
選擇合適的選擇器有助於維護 CSS，同時需注意優先權問題，避免過度使用 !important。